<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
               text-align: center;
                width: 1000px;
                height: 300px;
            }
            .btn{
                display: inline-block;
                height: 30px;
                line-height: 30px;
                border: 1px solid #ccc;
                background-color: #fff;
                padding: 0 10px;
                margin-right: 50px;
                color: green;
                text-decoration: none;
            }
            .btn:hover{
                background-color: #eee;
            }
            .loading{
                position: fixed;
                top: 0;
                left:0;
                width: 100%;
                height: 100%;
                background-color: #eee;
                text-align: center;
                font-size: 30px;
            }
            .progress{
                margin-top: 300px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/1.jpg" alt="" id="img" width="1000" height="500" />
            <p>
               <a href="javascript:;" class="btn" data-control='prev'>上一页</a>
               <a href="javascript:;" class="btn" data-control='next'>下一页</a>
            </p>
        </div>
        <div class="loading">
            <p class="progress">0%</p>
        </div>
        <script type="text/javascript" src="http://www.gov.cn/govweb/xhtml/2016gov/js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/preload.js"></script>
        <script type="text/javascript">

            var imgs=[
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/1.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/2.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/3.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/4.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/5.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/6.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/7.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/8.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/9.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/10.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/11.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/12.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/13.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/14.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/15.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/16.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/17.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/18.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/19.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/20.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/21.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/22.jpg',
                'http://www.gov.cn/govweb/xhtml/zhuanti/20180711lkqfwdgeAlbums/images/23.jpg'
                
            ];

            var index = 0,
                len = imgs.length,
               
                $progress = $('.progress'),

                $loading = $('.loading');

                $.preload({
                    imgsArr:imgs,
                    each:function (count, len) {
                        console.log(count)
                        $progress.html( Math.round( count/len*100 )+'%' );
                    },
                    all:function () {
                        $loading.hide();
                    },
                    order:true
                });
         

            $('.btn').on('click', function () {
                if ($(this).attr('data-control') === 'prev') {
                   

                   index = Math.max(0, --index);


                } else {
                    index = Math.min(len - 1, ++index);
                }

                document.title = ( index +1 ) + '/' +len;

                $('#img').attr('src', imgs[index]);
            })
        </script>
    </body>
</html>
